/* eslint-disable func-names */
import React, { useEffect } from 'react';
import { connect } from 'dva';
import { Button, Checkbox, Row, Col } from 'choerodon-ui';
import { Form, TextField, NumberField } from 'choerodon-ui/pro';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import styles from './style.less';
// import BackImg from './assets/back@2x.png';
import CalendarImg from './assets/calendar@2x.png';

import { StateType } from './typing';
// const { Header, Content } = Layout;

const buttons = ['暂挂', '取消', '恢复', '清空', '删除', '添加'];

interface MyMoProps {
  dispatch: any;
  myMo: StateType;
  loading: boolean;
}

const Head = function() {
  return (
    <React.Fragment>
      <Button type="primary" icon="save">
        保存
      </Button>
      <Button icon="sync" style={{ marginRight: 8 }}>
        重新加载
      </Button>
    </React.Fragment>
  );
};

const MyMo: React.FC<MyMoProps> = (props: MyMoProps) => {
  const { dispatch, myMo } = props;
  const { list } = myMo;
  useEffect(() => {
    dispatch({
      type: 'myMo/fetchList',
    });
  }, []);

  const changeNumber = function(e: any) {
    console.log(e, '===');
  };

  const clickBtn = (type: string) => {
    console.log(type, '====')
  }

  return (
    <PageHeaderWrapper
      title="TAS生成"
      headerProps={{
        backPath: '/path',
      }}
      header={<Head />}
    >
      <div className={styles.mymo}>
        <div className={styles.content}>
          <div className={styles.title}>
            <div className={styles['title-detail']}>MO信息</div>
          </div>

          <Form disabled columns={3}>
            <TextField label="工艺单类型" name="type1" value="梭织" />
            <TextField label="生成类型" name="type2" value="大货" />
            <TextField label="MO号" name="type3" value="MO2019230001" />
            <TextField label="产品编号" name="type4" value="A622F_319_4" />
            <TextField label="销售订单号" name="type5" value="S2019002199" />
            <TextField label="MO状态" name="type6" value="未下达" />
            <TextField label="准备状态" name="type7" value="完成准备" />
            <TextField label="交期" name="type8" value="2019-06-12" />
          </Form>

          <div className={styles.title}>
            <div className={styles['title-detail']}>工序级任务</div>
          </div>

          <div className={styles.projects}>
            <div className={styles.buttons}>
              {buttons.map((item: string) => {
                if (item === '添加') {
                  return (
                    <Button type="primary" icon="add" onClick={() => clickBtn(item)}>
                      {item}
                    </Button>
                  );
                } else {
                  return (
                    <Button
                      style={{
                        marginRight: 10,
                      }}
                      onClick={() => clickBtn(item)}
                    >
                      {item}
                    </Button>
                  );
                }
              })}
            </div>
            {list.map(item => (
              <div className={styles['project-detail']}>
                <div className={styles['project-header']}>
                  <Checkbox> {item.name}</Checkbox>
                  <span className={styles['project-header-title']}>数量: {item.number}</span>
                </div>
                <div
                  style={{
                    display: 'flex',
                  }}
                >
                  {item.list.map(newItem => (
                    <div className={styles['project-cards']}>
                      <div className={styles['project-card']}>
                        <div className={styles['project-card-header']}>
                          <Checkbox>{newItem.numberCode}</Checkbox>
                          <span className={styles['project-card-status']}>新建</span>
                        </div>
                        <div className={styles['project-card-footer']}>
                          <div className={styles['project-card-desc']}>
                            <div>{newItem.name}</div>
                            <div>{newItem.code}</div>
                          </div>
                          <div className={styles['project-card-date']}>
                            <Row>
                              <Col span={12} style={{ transform: 'translateY(25%)' }}>
                                <img alt="" src={CalendarImg} />
                                <span>{newItem.date}</span>
                              </Col>
                              <Col span={12}>
                                <NumberField
                                  step={1}
                                  value={newItem.number}
                                  onChange={e => changeNumber(e)}
                                />
                              </Col>
                            </Row>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </PageHeaderWrapper>
  );
};

export default connect(
  ({
    myMo,
    loading,
  }: {
    myMo: StateType;
    loading: {
      models: { [key: string]: boolean };
    };
  }) =>
    ({
      myMo,
      loading: loading.models.myMo,
    } as any)
)(MyMo);
